<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript选择器比较分析</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      color: #333;
      line-height: 1.6;
      padding: 20px;
      min-height: 100vh;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      padding: 30px 0;
      margin-bottom: 30px;
    }

    h1 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 1.2rem;
      color: #7f8c8d;
      max-width: 800px;
      margin: 0 auto;
    }

    .comparison-section {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 40px;
    }

    .card {
      flex: 1;
      min-width: 300px;
      background: white;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card h2 {
      color: #3498db;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #eaeaea;
    }

    .code-block {
      background: #2d3e50;
      color: #ecf0f1;
      padding: 15px;
      border-radius: 5px;
      margin: 15px 0;
      font-family: 'Courier New', monospace;
      overflow-x: auto;
    }

    .pros-cons {
      margin: 20px 0;
    }

    .pros, .cons {
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
    }

    .pros {
      background: #e8f6f3;
      border-left: 4px solid #2ecc71;
    }

    .cons {
      background: #fdedec;
      border-left: 4px solid #e74c3c;
    }

    .test-area {
      background: white;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 40px;
    }

    .test-area h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }

    .elements-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 20px 0;
    }

    .element {
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      text-align: center;
    }

    .buttons {
      display: flex;
      gap: 15px;
      margin: 20px 0;
    }

    button {
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      background: #3498db;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #2980b9;
    }

    #result {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 5px;
      margin-top: 20px;
      min-height: 100px;
    }

    .performance {
      background: white;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .performance h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }

    .recommendation {
      background: #e8f4fc;
      padding: 20px;
      border-radius: 5px;
      margin: 20px 0;
      border-left: 4px solid #3498db;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #e0e0e0;
    }

    th {
      background-color: #f2f6fa;
      color: #2c3e50;
    }

    tr:hover {
      background-color: #f5f7fa;
    }

    @media (max-width: 768px) {
      .comparison-section {
        flex-direction: column;
      }

      .buttons {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>JavaScript选择器比较分析</h1>
    <p class="subtitle">理解 <code>$("input[name='id']")</code> 与 <code>$("[name='id']")</code> 的区别</p>
  </header>

  <div class="comparison-section">
    <div class="card">
      <h2>选择器一：$("input[name='id']")</h2>
      <div class="code-block">var userId = $("input[name='id']").val();</div>
      <p>这个选择器专门针对 <strong>input</strong> 元素，并且其 <strong>name</strong> 属性为 'id'。</p>

      <div class="pros-cons">
        <div class="pros">
          <h3>优点：</h3>
          <ul>
            <li>更具体，只查找input元素</li>
            <li>性能更好（范围更窄）</li>
            <li>减少意外匹配其他元素的风险</li>
          </ul>
        </div>

        <div class="cons">
          <h3>缺点：</h3>
          <ul>
            <li>如果元素不是input类型，则无法找到</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="card">
      <h2>选择器二：$("[name='id']")</h2>
      <div class="code-block">var userId = $("[name='id']").val();</div>
      <p>这个选择器查找 <strong>任何</strong> 具有 <strong>name</strong> 属性为 'id' 的元素。</p>

      <div class="pros-cons">
        <div class="pros">
          <h3>优点：</h3>
          <ul>
            <li>更通用，可以找到任何具有name属性的元素</li>
          </ul>
        </div>

        <div class="cons">
          <h3>缺点：</h3>
          <ul>
            <li>性能稍差（搜索范围更广）</li>
            <li>可能意外匹配到非input元素</li>
            <li>如果页面有多个同名元素，可能选择错误</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="test-area">
    <h2>测试区域</h2>
    <p>下面是一些带有name="id"属性的不同元素：</p>

    <div class="elements-container">
      <div class="element">
        <label>Input元素</label>
        <div class="code-block">&lt;input type="hidden" name="id" value="input_value"&gt;</div>
      </div>

      <div class="element">
        <label>Select元素</label>
        <div class="code-block">&lt;select name="id"&gt;&lt;option value="select_value"&gt;&lt;/select&gt;</div>
      </div>

      <div class="element">
        <label>Textarea元素</label>
        <div class="code-block">&lt;textarea name="id"&gt;textarea_value&lt;/textarea&gt;</div>
      </div>

      <div class="element">
        <label>Div元素</label>
        <div class="code-block">&lt;div name="id"&gt;div_value&lt;/div&gt;</div>
      </div>
    </div>

    <div class="buttons">
      <button onclick="testSpecific()">测试 $("input[name='id']")</button>
      <button onclick="testGeneric()">测试 $("[name='id']")</button>
    </div>

    <div id="result">
      <p>点击上方按钮查看测试结果...</p>
    </div>
  </div>

  <div class="performance">
    <h2>性能比较</h2>

    <table>
      <thead>
      <tr>
        <th>选择器类型</th>
        <th>性能特点</th>
        <th>适用场景</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td><code>$("input[name='id']")</code></td>
        <td>速度更快，更高效</td>
        <td>当您确切知道要选择的是input元素时</td>
      </tr>
      <tr>
        <td><code>$("[name='id']")</code></td>
        <td>速度稍慢，需要检查所有元素</td>
        <td>当需要选择任何具有该名称属性的元素时</td>
      </tr>
      </tbody>
    </table>

    <div class="recommendation">
      <h3>最佳实践建议</h3>
      <p>在大多数情况下，<strong>$("input[name='id']")</strong> 是更好的选择，因为它：</p>
      <ul>
        <li>更精确地定位目标元素</li>
        <li>提供更好的性能</li>
        <li>减少意外选择错误元素的风险</li>
      </ul>
      <p>只有在需要选择非input元素时，才使用更通用的选择器 <strong>$("[name='id']")</strong>。</p>
    </div>
  </div>
</div>

<script>
  function testSpecific() {
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = `
                <p><strong>测试 $("input[name='id']") 的结果：</strong></p>
                <p>这个选择器只会选择input元素，忽略其他类型的元素（如select、textarea、div等）。</p>
                <p>在您的原始代码中，由于使用的是 <code>&lt;input name="id" type="hidden"&gt;</code>，所以两种选择器都能正常工作。</p>
                <p class="pros">✅ 更安全，避免选择到非输入元素</p>
                <p class="pros">✅ 性能更好，搜索范围更小</p>
            `;
  }

  function testGeneric() {
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = `
                <p><strong>测试 $("[name='id']") 的结果：</strong></p>
                <p>这个选择器会选择所有具有name="id"属性的元素，包括input、select、textarea、div等。</p>
                <p>如果页面上有多个元素具有相同的name属性，可能会选择到错误的元素。</p>
                <p class="cons">❌ 可能选择到非目标元素</p>
                <p class="cons">❌ 性能稍差，需要检查所有元素</p>
                <p>在您的原始代码中，由于使用的是隐藏的input元素，所以两种选择器都能正常工作。</p>
            `;
  }
</script>
</body>
</html>